﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<script src="../WF/Scripts/config.js" type="text/javascript"></script>
	<link href="../WF/Scripts/bootstrap/css/font-awesome.css" rel="stylesheet" type="text/css" />
    <link href="../WF/CCForm/JS/mselector.css" rel="stylesheet" type="text/css" />
	<script src="../WF/Scripts/easyUI/jquery-1.8.0.min.js" type="text/javascript"></script>
	<script src="../WF/Scripts/easyUI/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../WF/CCForm/JS/mselector.js" type="text/javascript"></script>
	
    <script src="../WF/Comm/Gener.js" type="text/javascript"></script>

	<script type="text/javascript">
		$(document).ready(function () {
			$("#container").mselector({
				"label" : "测试1",
				"valueField" : "value",
				"textField" : "text",
				"tip" : "请输入",
				"fit" : false,
				"width" : 300,
				"data" : [{ "value" : "2102", "text" : "大连" }, { "value" : "3701", "text" : "济南" }]
			});
			//
			$("#container1").mselector({
				"label" : "测试2",
				"fit" : false,
				"width" : 500,
				"filter" : false,
				"sql" : "SELECT No, Name FROM CN_CITY WHERE Name Like '%@Key%'",
				"onSelect" : function (record) {
					console.log(JSON.stringify(record));
				},
				"onUnselect" : function (record) {
					console.log(JSON.stringify(record));
				}
			});
		});
		function getValue() {
			alert($("#container").mselector("getValue"));
		}
		function getText() {
			alert($("#container").mselector("getText"));
		}
		function doClear() {
			$("#container").mselector("clear");
		}
		function setValues() {
			$("#container").mselector("setValues", "2102,3701");
		}
		//
		function getValue1() {
			alert($("#container1").mselector("getValue"));
		}
		function getText1() {
			alert($("#container1").mselector("getText"));
		}
		function doClear1() {
			$("#container1").mselector("clear");
		}
		function setValues1() {
			$("#container1").mselector("setValues", "大");
		}
		function loadData1() {
			$("#container1").mselector("loadData", [{
				"No" : "2102",
				"Name" : "大连"
			}, {
				"No" : "3701",
				"Name" : "济南"
			}]);
		}
	</script>
</head>
<body>
	<div id="container"></div>
	<input type="button" value="getValue" onclick="getValue()">
	<input type="button" value="getText" onclick="getText()">
	<input type="button" value="clear" onclick="doClear()">
	<br>
	<br>
	<br>
	<input type="button" value="setValues" onclick="setValues()">&nbsp;$("#container").mselector("setValues", "2102,3701");	// 2102,3701 (大连,济南)
	<hr>
	<div id="container1"></div>
	<input type="button" value="getValue" onclick="getValue1()">
	<input type="button" value="getText" onclick="getText1()">
	<input type="button" value="clear" onclick="doClear1()">
	<br>
	<br>
	<br>
	<input type="button" value="setValues" onclick="setValues1()">&nbsp;$("#container").mselector("setValues", "大");	// 大
	<br>
	<input type="button" value="loadData" onclick="loadData1()">&nbsp;$("#container").mselector("loadData", [{ "value" : "2102", "text" : "大连" }, { "value" : "3701", "text" : "济南" }]);
</body>
</html>
